<!-- 使用场景在大数据量的情况下，如果只是第一层数据是响应式的可以使用这个属性，减少vue追踪底层响应式，提高性能 -->
<template>
  <h1>name:{{ b.name }}</h1>
  <!-- <h1>b.obj.name:{{b.obj.name}}</h1>  模板访问会触发响应式，用watch来验证-->
</template>
<script setup lang="ts" name="Count">
import { shallowReactive, ref, watch } from 'vue'

const b = shallowReactive({ name: 'zll', age: 10, obj: { name: '小红' } })

setTimeout(()=>{
b.name = 'e' // 触发 watch
b.obj.name = '小三' // 不会触发 watch
},2000)

// 监听 b.name（第一层属性）
watch(
  () => b.name,
  (newVal) => {
    console.log('b.name changed:', newVal) // 会触发
  }
)

// 监听 b.obj.name（嵌套属性）
watch(
  () => b.obj.name,
  (newVal) => {
    console.log('b.obj.name changed:', newVal) // 不会触发！
  }
)
</script>
